/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// Styles for Dashboard Card Component

@import "base/environment";
@import "components/ic-badge";


$ic-DashboardCard-width: 262px;
$ic-DashboardCard-icon-size: 24px;
$ic-DashboardCard-icon-color: $ic-icon-link-color;

// Optional parent container padding
.ic-DashboardCard__box {
  padding: $ic-sp 0.125rem 0;
}

@supports (position: sticky) or (position: -webkit-sticky) {
  .ic-DashboardCard__box {
    padding-top: $ic-sp * 2;
  }
}

@keyframes placeholder {
  to { opacity: 0.5; }
}

.ic-DashboardCard__placeholder-svg {
  display: block;
  width: 100%;
  height: 100%;
  .ic-DashboardCard__placeholder-animates > * {
    fill: darken($ic-bg-light-neutral, 3%);
    animation-name: placeholder;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    @for $i from 2 through 7 {
      &:nth-child(#{$i}) {
       animation-delay: 0.1s * $i;
      }
    }
  }
}

.ic-DashboardCard {
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(black, 0.3);
  border-radius: $ic-border-radius;
  overflow: hidden;
  background: $ic-color-light;
  width: $ic-DashboardCard-width;
  display: inline-block;
  vertical-align: top;
  margin: 0 $ic-sp*3 $ic-sp*3 0;
  .no-touch & {
    &:hover { box-shadow: 0 4px 10px rgba(black, 0.35); }
  }
}

.ic-DashboardCard__header {
  position: relative; // positioning context for cog button
  cursor: pointer;
  box-sizing: border-box;
}

.ic-DashboardCard__header_hero {
  box-sizing: border-box;
  height: 146px;
  border: 1px solid rgba(black, 0.1);
}

.ic-DashboardCard__header_image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.ic-DashboardCard__header_content {
  box-sizing: border-box;
  padding: $ic-sp $ic-sp*1.5 0;
  background: $ic-color-light;
}

@mixin dashcardHeaderButton {
  position: absolute;
  top: $ic-sp; right: $ic-sp;
  width: $ic-sp*3;
  height: $ic-sp*3;
  border-radius: 50%;
}

.ic-DashboardCard__header-button {
  @include dashcardHeaderButton;
  @include overwrite-default-icon-size($ic-DashboardCard-icon-size);
}

.ic-DashboardCard__header-button-bg {
  @include dashcardHeaderButton;
}

.ic-DashboardCard_settings_icon {
  color: white;
  opacity: 0.6;
}

.ic-DashboardCard__header-title {
  transition: all 0.2s ease-out;
  transform: translate3d(0,0,0);
  padding: 0;
  margin: 0;
  line-height: 1.3;
  font-size: $baseFontSize;
  font-weight: bold;
}

.ic-DashboardCard__header-subtitle {
  line-height: 1.3;
  padding: 0;
  margin-top: $ic-sp/3;
}

.ic-DashboardCard__header-term {
  line-height: 1.3;
  font-size: $baseFontSize - 2;
  height: 1rem;
}

@if $use_high_contrast == false {
  .ic-DashboardCard__header-subtitle,
  .ic-DashboardCard__header-term {
    color: $ic-icon-link-color;
  }
}

.ic-DashboardCard__action-layout {
  position: relative;
}

.ic-DashboardCard__action-badge {
  @include ic-badge-maker(18px, $ic-brand-primary, $ic-color-light);
  transition: all 0.2s;
  position: absolute;
  top: -0.5rem; right: -0.875rem;
  z-index: 1; // when dashcard links get squished, don't cut off badges
}

.ic-DashboardCard__action-container {
  box-sizing: border-box;
  display: flex;
  padding: 0 0 $ic-sp;
  margin-top: $ic-sp * 0.75;
  height: 2.5rem; // maintain nav height when there are no action links
}

.ic-DashboardCard__action {
  transition: color 0.2s;
  box-sizing: border-box;
  color: $ic-DashboardCard-icon-color;
  flex: 0 0 25%;
  display: flex;
  justify-content: center;
  @include overwrite-default-icon-size($ic-DashboardCard-icon-size);

  .no-touch & {
    &:focus {
      @if $use_high_contrast {
        outline: 1px solid $ic-link-color;
        outline-offset: 0.125rem;
      }
      @else { outline: none; }
    }
    &:hover { color: $ic-brand-primary; }
  }
}

.DashboardCardMenu__ColorPicker {
  padding-left: 8px;
}

.DashboardCardMenu__MovementItem {
  display: flex;
  align-items: center;
}

.DashboardCardMenu__MovementIcon {
  margin-right: $ic-sp;
  font-size: $ic-font-size--large;
}
